<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表商城</title>
    <style>
         * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        height: 100%;
        width: 100%;
        background: rgb(241, 243, 245);
      }
      #box {
        width: 100%;
        background-color: black;
      }
      a,
      li,
      ul {
        list-style: none;
        text-decoration: none;
      }
      #nav {
        height: 36px;
        width: 1200px;
        color: #ccc;
        margin: auto;
      }
      .nav-ul li {
        line-height: 36px;
        float: left;
        background: url(./imgs/fgx.png) no-repeat right;
        font-size: 12px;
        padding-right: 6px;
        display: block;
        margin-right: 6px;
      }
      .nav-ul li a {
        margin: 0 5px;
        color: #ccc;
        text-decoration: none;
      }
      .nav-ul li a:hover {
        color: #fff;
      }
      .left {
        float: left;
      }
      .rigth {
        float: right;
      }
      .nav-ul-rigth {
        float: right;
      }
      #classification {
        width: 100%;
        background: rgb(255, 255, 255);
      }
      .classification-huawei {
        width: 1200px;
        height: 75px;
        margin: auto;
        /* background-color: #ccc; */
      }
      .logo {
        float: left;
        margin-right: 50px;
      }
      .classification-huawei .logo a {
        width: 100px;
        height: 70px;
        display: block;
      }
      .logo a img {
        height: 100%;
        width: 100%;
      }
      .classification-li ul li {
        line-height: 75px;
        float: left;
      }

      .classification-li ul li a {
        color: black;
        margin-right: 40px;
      }
      .classification-li ul li a:hover {
        color: red;
      }
      .imgs{
          width: 100%;
          height:550px;
          /* background-color: aqua; */
      }
      .imgs img{
          width: 100%;
          height: 100%;
      }
      .list{
        width: 1200px;
        margin: auto;
        /* background-color: #ccc; */
        overflow:hidden
      }
      .list-text{
          /* background-color: pink; */
         font-size: 30px;
         font-weight: bold;
         text-align: center;
        margin: 40px 0;
      }
      .list-img img{
          width: 100px;
          height: 100px;
      }
      .tab-shouji-1 {
        width: 230px;
        height: 390px;
        background-color: #fff;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .tab-shouji-1 img {
        display: block;
        width: 200px;
        height: 200px;
        margin: auto;
        padding-top: 35px;
        padding-bottom: 35px;
      }
      .tab-shouji-1 span {
        font-size: 12px;
        font-weight: bold;
      }
      .tab-shouji-1 p {
        font-weight: bold;
        font-size: 14px;
        text-align: center;
      }
      .span-xin {
        color: #fff;
        background-color: red;
        border-radius: 10%;
        margin-right: 5px;
      }
      .tab-text {
        color: #888888;
        font-weight: normal !important;
        padding: 10px;
        font-size: 12px;
      }
      .tab-moy {
        color: red;
        margin-bottom: 10px;
      }
      .span-jifen {
        color: red;
        border-radius: 10%;
        border: 1px solid red;
        padding: 0 5px;
      }
      .tab-shouji-1:hover {
        box-shadow: 10px -10px 50px #888888;
      }

      #buttom {
        width: 100%;
        background-color: #fff;
      }
      .but-list {
        width: 1200px;
        height: 120px;
        margin: auto;

        border-bottom: 1px solid #ccc;
      }
      .but-list img {
        display: block;
        float: left;
        width: 25px;
        height: 25px;
        margin: auto;
        text-align: center;
        margin-right: 10px;
      }
      .but-list-l {
        width: 210px;
        height: 50px;
        float: left;
        margin-top: 50px;
        margin-left: 90px;
      }
      .but-list .but-list-l:nth-child(1) {
        margin-left: 50px;
      }
      .but-nav {
        width: 1200px;
        margin: auto;
        padding: 50px 0;
      }
      .but-nav-ul {
        float: left;
      }
      .but-nav-ul li {
        margin-top: 10px;
        cursor: pointer;
      }
      .but-nav-box {
        height: 200px;
        font-size: 12px;
        color: #888888;
      }
      .but-nav-ulLi {
        font-size: 14px;
        color: black;
        margin-bottom: 30px;
      }
      .ul-left {
        margin-left: 100px;
      }
      .but-nav-ul li:hover {
        color: red;
      }
      .but-dz {
        width: 250px;
        height: 200px;
        /* background-color: pink; */
        margin-left: 70px;
        border-left: 1px solid #ccc;
      }
      .but-dz p {
        color: black;
        font-size: 24px;
        text-align: center;
        margin-top: 20px;
      }
      .but-dz p:nth-child(2) {
        font-size: 14px;
      }
      .but-dz a {
        display: block;
        width: 200px;
        height: 40px;
        background-color: black;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        border-radius: 30px;
        margin: 19px auto;
      }
      .but-dz img {
        display: block;
        margin: auto;
      }
      #pls{
        overflow:hidden;
  text-overflow:ellipsis; 
  white-space:nowrap; 

      }
    </style>
</head>
<body>
    <div id="box">
        <!-- top -->
        <div id="nav">
            <ul class="nav-ul left">
              <li><a href="index.html">首页</a></li>
              <li><a href="">华为官网</a></li>
              <li><a href="">花粉俱乐部</a></li>
              <li><a href="">V码(优购码)</a></li>
              <li><a href="">企业购</a></li>
              <li><a href="">Select Region</a></li>
              <li style="background: url()"><a href="">更多精彩</a></li>
            </ul>
            <ul class="nav-ul right" style="float: right">
              <li><a href="" class="mobile">请登录</a>&nbsp;<a href="" class="mobile1">注册</a></li>
              <li><a href="">我的订单</a></li>
              <li><a href="">客服</a></li>
              <li><a href="">网站导航</a></li>
              <li><a href="">手机版</a></li>
              <li style="background: url(); background-color: rgb(66, 66, 66)">
                <a href="./cart.html">购物车</a>
              </li>
            </ul>
          </div>
        </div>
        <div id="classification">
          <div class="classification-huawei">
            <div class="logo">
              <a href="">
                <img src="./imgs/logo.png" alt="" />
              </a>
            </div>
            <div class="classification-li">
              <ul>
                <li><a href="">华为专区</a></li>
                <li><a href="">鸿蒙智联</a></li>
                <li><a href="">莫塞尔</a></li>
                <li><a href="">华为智选</a></li>
                <li><a href="">Harmony OS</a></li>
                <li><a href="">教育优惠</a></li>
                <li><a href="">特惠企采</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!---->
        <div class="imgs">
            <img src="./imgs/2.webp" alt="限时秒杀" class="imgs-value">
        </div>
        
        <div id="list">
            <!-- <div class="list">
                <div class="list-text">新品上市</div>
    
                <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                    <img src="./imgs/2-a.webp" alt="">
                    <p> <span class="span-xin"></span>22222</p>
                    <p class="tab-text">111111</p>
                    <p class="tab-moy">￥11111</p>
                    <p> <span class="span-jifen">11111</span></p>
                </div>
                <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                    <img src="./imgs/2-a.webp" alt="">
                    <p> <span class="span-xin"></span>22222</p>
                    <p class="tab-text">111111</p>
                    <p class="tab-moy">￥11111</p>
                    <p> <span class="span-jifen">11111</span></p>
                </div>
                <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                    <img src="./imgs/2-a.webp" alt="">
                    <p> <span class="span-xin"></span>22222</p>
                    <p class="tab-text">111111</p>
                    <p class="tab-moy">￥11111</p>
                    <p> <span class="span-jifen">11111</span></p>
                </div>
                <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                    <img src="./imgs/2-a.webp" alt="">
                    <p> <span class="span-xin"></span>22222</p>
                    <p class="tab-text">111111</p>
                    <p class="tab-moy">￥11111</p>
                    <p> <span class="span-jifen">11111</span></p>
                </div>
                <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                    <img src="./imgs/2-a.webp" alt="">
                    <p> <span class="span-xin"></span>22222</p>
                    <p class="tab-text">111111</p>
                    <p class="tab-moy">￥11111</p>
                    <p> <span class="span-jifen">11111</span></p>
                </div>
    
            </div> -->
          
        </div>
    </div>

    <div id="buttom">
        <div class="but-list">
          <div class="but-list-l">
            <img src="./imgs/but1 (1).png" alt="" />
            百强企业 品质保证
          </div>
          <div class="but-list-l">
            <img src="./imgs/but2.png" alt="" />
            七天退货 15天换货
          </div>
          <div class="but-list-l">
            <img src="./imgs/but4.png" alt="" />
            48元起免运费
          </div>
          <div class="but-list-l">
            <img src="./imgs/but3.png" alt="" />
            2000家服装店 全国联保
          </div>
        </div>
        <div class="but-nav">
          <div class="but-nav-box">
            <ul class="but-nav-ul">
              <li class="but-nav-ulLi">购物指南</li>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>O2O采购</li>
            </ul>
            <ul class="but-nav-ul ul-left">
              <li class="but-nav-ulLi">售后服务</li>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>O2O采购</li>
            </ul>
            <ul class="but-nav-ul ul-left">
              <li class="but-nav-ulLi">维修与技术支持</li>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>O2O采购</li>
            </ul>
            <ul class="but-nav-ul ul-left">
              <li class="but-nav-ulLi">特色服务</li>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>O2O采购</li>
            </ul>
            <ul class="but-nav-ul ul-left">
              <li class="but-nav-ulLi">关于我们</li>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>O2O采购</li>
            </ul>
            <ul class="but-nav-ul ul-left">
              <li class="but-nav-ulLi">友情链接</li>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>O2O采购</li>
            </ul>
            <div class="but-dz left">
              <p>950805</p>
              <p>7 x 24 小时客服热线(仅收市话费)</p>
              <a href="">在线客服</a>
              <img src="./imgs/buts.png" alt="" />
            </div>
          </div>
        </div>
      </div>
</body>
</html>
<script>
    function getUrlParam(key){
    // ?id=2&type=1
    let result = '';
    location.search.substr(1).split('&').forEach(item=>{
        let keyValue = item.split('=');
        if(keyValue[0]==key){
            result = keyValue[1];
        }
    })
    return result;
}
</script>
<script>
    let mobile=document.querySelector(".mobile")
  let mobile1=document.querySelector(".mobile1")
  if(localStorage.getItem("huaweiName")){
    mobile.innerHTML=localStorage.getItem("huaweiName")
    mobile1.innerHTML="退出账号"
  }
  mobile.onclick=function(){
    console.log(mobile1.innerHTML)
    if(mobile.innerHTML=="请登录"){
      localStorage.setItem('urlS',location.href);  
      location.href="login.html"
      return false
    }else{
      alert("账号名称")
      return false
    }
  }
  mobile1.onclick=function(){
    console.log(mobile1.innerHTML)
    if(mobile1.innerHTML=="退出账号"){
      localStorage.removeItem("huaweiName")
      localStorage.removeItem("huaweiID")
      location.reload()
      return false
    }else{
      location.href="register.html"
      return false
    }
  }
  //跳转
  function listSrc(a) {
    console.log(a.getAttribute("value"));
    if(localStorage.getItem("huaweiName")){
        location.href = `detail.html?goodsId=${a.getAttribute("value")}`;
        return
    }
    alert("请先登录")
    localStorage.setItem('urlS',location.href);  
    location.href ="login.html"
  }

  const uid=getUrlParam("id")
  let uids=""
  uids=uid
  if(uid==12){
    uids="4"
  }
  document.querySelector(".imgs-value").src="./imgs/"+uids+".webp"
  let listS=document.getElementById("list")
  var a="http://phpclub.org.cn:8080/api/goods/lists?categoryId=10"
  let xhr = new XMLHttpRequest();
  xhr.open("get", "http://phpclub.org.cn:8080/api/goods/lists?categoryId="+uid);
  xhr.send("");
  console.log("http://phpclub.org.cn:8080/api/goods/lists"+uid)
  xhr.onreadystatechange = function () {
      let nameS=""
      if(uid==2){
        nameS="新品上市"
      }else if(uid==4){
        nameS="超星计划"
      }else if(uid==10){
        nameS="运动健康"
      }else if(uid==11){
        nameS="智能家居"
      }else if(uid==12){
        nameS="限时秒杀"
      }
    if (xhr.readyState == 4 && xhr.status == 200) {
      let text = JSON.parse(xhr.responseText);
      console.log(text)
      for(let i=0;i<text.data.length;i++){
            // listS.innerHTML+='<div class="list"><div class="list-text">新品上市</div>'
            listS.innerHTML+='<div class="list"><div class="list-text">'+nameS+'</div>'
                for(let j=0;j<text.data.length;j++){
                    document.querySelectorAll(".list")[i].innerHTML+=`
                    <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.data[j].id}>
                    <img src="${text.data[j].goodsImg}" alt="">
                    <p id="pls"> <span class="span-xin"></span>${text.data[j].goodsBody}</p>
                    <p class="tab-text">${text.data[j].goodsName}</p>
                    <p class="tab-moy">${text.data[j].marketPrice}</p>
                    <p> <span class="span-jifen">赠送积分</span></p>
                </div>
                `
                }
                listS.innerHTML+=" </div>"
        }
    }
  }
</script>